<script>
import {loginUser} from "@/api/User";

export default {
  name: 'InterviewLogin',
  data() {
    return {
      username: '',
      password: '',
      pattern: /^[a-zA-Z0-9_-]{4,16}$/,
    };
  },
  methods: {
    async onSubmit(values) {
      // console.log('submit', values);
      const result = await loginUser(values)
      console.log(result)
      if (result.code === 10000){
        this.$toast.success('登录成功')
        localStorage.setItem('token', result.data.token)
        this.$router.push('/layout/article')
      }
    },
  },
}
</script>

<template>
  <div class="login">
    <div class="title">
      面经登录
    </div>
    <van-form @submit="onSubmit">
      <van-field
          v-model="username"
          name="username"
          label="用户名"
          placeholder="用户名"
          :rules="[{ pattern, required: true, message: '请填写用户名' }]"
      />
      <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ pattern, required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" color="#fa6d1d">登录</van-button>
      </div>
    </van-form>
    <div class="to-register">
      <div class="to-register-text">
        还没有账号？
        <router-link to="/register">
          立即注册
        </router-link>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.title{
  color: #323233;
  font-size: 16px;
  margin:20px 0;
  text-align: center;
  font-weight: 600;
}
.to-register{
  text-align: end;
  padding-right: 20px;
  a{
    color: #fa6d1d;
  }
}
</style>